<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>支付成功 - 影院订票系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .success-header {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: white;
            padding: 3rem 0;
            text-align: center;
        }
        .success-icon {
            font-size: 4rem;
            margin-bottom: 1rem;
        }
        .ticket-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            margin: 2rem 0;
            position: relative;
        }
        .ticket-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 2rem;
            text-align: center;
        }
        .ticket-content {
            padding: 2rem;
        }
        .movie-poster {
            width: 120px;
            height: 160px;
            object-fit: cover;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        .ticket-info {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 1.5rem;
            margin-top: 1.5rem;
        }
        .info-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 1rem;
            padding-bottom: 1rem;
            border-bottom: 1px dashed #dee2e6;
        }
        .info-row:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }
        .info-label {
            color: #666;
            font-weight: 500;
        }
        .info-value {
            font-weight: bold;
            color: #333;
        }
        .seat-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        .seat-badge {
            background: #667eea;
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 600;
        }
        .qr-code {
            text-align: center;
            padding: 2rem;
            background: white;
            border-radius: 10px;
            margin-top: 1rem;
        }
        .qr-placeholder {
            width: 150px;
            height: 150px;
            background: #f8f9fa;
            border: 2px dashed #dee2e6;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
            color: #666;
        }
        .action-buttons {
            text-align: center;
            margin-top: 2rem;
        }
        .btn-primary-custom {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 25px;
            padding: 12px 30px;
            font-weight: 600;
            margin: 0 0.5rem;
        }
        .btn-outline-custom {
            border: 2px solid #667eea;
            color: #667eea;
            border-radius: 25px;
            padding: 12px 30px;
            font-weight: 600;
            margin: 0 0.5rem;
        }
        .btn-outline-custom:hover {
            background: #667eea;
            color: white;
        }
        .notice-card {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 10px;
            padding: 1.5rem;
            margin-top: 2rem;
        }
        .notice-title {
            color: #856404;
            font-weight: bold;
            margin-bottom: 1rem;
        }
        .notice-list {
            color: #856404;
            margin-bottom: 0;
        }
        .notice-list li {
            margin-bottom: 0.5rem;
        }
    </style>
</head>
<body class="bg-light">
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
        <div class="container">
            <a class="navbar-brand fw-bold text-primary" href="${pageContext.request.contextPath}/movies">
                <i class="fas fa-film me-2"></i>影院订票系统
            </a>
            
            <div class="navbar-nav ms-auto">
                <div class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                        <i class="fas fa-user me-1"></i>${sessionScope.user.username}
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="${pageContext.request.contextPath}/user/orders">
                            <i class="fas fa-ticket-alt me-2"></i>我的订单
                        </a></li>
                        <li><a class="dropdown-item" href="${pageContext.request.contextPath}/logout">
                            <i class="fas fa-sign-out-alt me-2"></i>退出登录
                        </a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <!-- 成功头部 -->
    <section class="success-header">
        <div class="container">
            <div class="success-icon">
                <i class="fas fa-check-circle"></i>
            </div>
            <h2>支付成功！</h2>
            <p class="mb-0">您的电影票已购买成功，请保存好电子票据</p>
        </div>
    </section>

    <div class="container">
        <!-- 电子票据 -->
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="ticket-card">
                    <div class="ticket-header">
                        <h4><i class="fas fa-ticket-alt me-2"></i>电子票据</h4>
                        <p class="mb-0">请凭此票据到影院取票或直接入场</p>
                    </div>
                    
                    <div class="ticket-content">
                        <div class="row">
                            <div class="col-md-3 text-center">
                                <img src="${order.showtime.movie.posterUrl != null ? order.showtime.movie.posterUrl : '/images/default-poster.jpg'}" 
                                     class="movie-poster" alt="${order.showtime.movie.title}">
                            </div>
                            <div class="col-md-9">
                                <h5 class="mb-3">${order.showtime.movie.title}</h5>
                                
                                <div class="ticket-info">
                                    <div class="info-row">
                                        <span class="info-label">
                                            <i class="fas fa-building me-2"></i>影院
                                        </span>
                                        <span class="info-value">${order.showtime.cinema.name}</span>
                                    </div>
                                    
                                    <div class="info-row">
                                        <span class="info-label">
                                            <i class="fas fa-door-open me-2"></i>影厅
                                        </span>
                                        <span class="info-value">${order.showtime.hall.name}</span>
                                    </div>
                                    
                                    <div class="info-row">
                                        <span class="info-label">
                                            <i class="fas fa-calendar me-2"></i>日期
                                        </span>
                                        <span class="info-value">
                                            <fmt:formatDate value="${order.showtime.showDate}" pattern="yyyy年MM月dd日"/>
                                        </span>
                                    </div>
                                    
                                    <div class="info-row">
                                        <span class="info-label">
                                            <i class="fas fa-clock me-2"></i>时间
                                        </span>
                                        <span class="info-value">
                                            <fmt:formatDate value="${order.showtime.showTime}" pattern="HH:mm"/>
                                        </span>
                                    </div>
                                    
                                    <div class="info-row">
                                        <span class="info-label">
                                            <i class="fas fa-couch me-2"></i>座位
                                        </span>
                                        <div class="seat-badges">
                                            <c:forEach var="orderSeat" items="${order.orderSeats}">
                                                <span class="seat-badge">
                                                    ${orderSeat.seat.rowNum}排${orderSeat.seat.seatNum}座
                                                </span>
                                            </c:forEach>
                                        </div>
                                    </div>
                                    
                                    <div class="info-row">
                                        <span class="info-label">
                                            <i class="fas fa-ticket-alt me-2"></i>票数
                                        </span>
                                        <span class="info-value">${order.ticketCount}张</span>
                                    </div>
                                    
                                    <div class="info-row">
                                        <span class="info-label">
                                            <i class="fas fa-money-bill me-2"></i>金额
                                        </span>
                                        <span class="info-value text-danger">¥${order.totalAmount}</span>
                                    </div>
                                    
                                    <div class="info-row">
                                        <span class="info-label">
                                            <i class="fas fa-receipt me-2"></i>订单号
                                        </span>
                                        <span class="info-value">${order.orderNo}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 二维码 -->
                        <div class="qr-code">
                            <div class="qr-placeholder">
                                <div>
                                    <i class="fas fa-qrcode fa-3x mb-2"></i>
                                    <div>取票二维码</div>
                                </div>
                            </div>
                            <small class="text-muted">请在影院自助取票机扫描此二维码取票</small>
                        </div>
                    </div>
                </div>
                
                <!-- 操作按钮 -->
                <div class="action-buttons">
                    <a href="${pageContext.request.contextPath}/user/orders" class="btn btn-primary-custom">
                        <i class="fas fa-list me-2"></i>查看所有订单
                    </a>
                    <a href="${pageContext.request.contextPath}/movies" class="btn btn-outline-custom">
                        <i class="fas fa-film me-2"></i>继续购票
                    </a>
                    <button type="button" class="btn btn-outline-custom" onclick="window.print()">
                        <i class="fas fa-print me-2"></i>打印票据
                    </button>
                </div>
                
                <!-- 温馨提示 -->
                <div class="notice-card">
                    <div class="notice-title">
                        <i class="fas fa-info-circle me-2"></i>温馨提示
                    </div>
                    <ul class="notice-list">
                        <li>请提前30分钟到达影院，避免错过开场时间</li>
                        <li>可凭订单号或二维码在影院自助取票机取票</li>
                        <li>如需退票，请在开场前1小时申请，具体退票规则请查看订单详情</li>
                        <li>请保持手机畅通，影院可能会发送入场提醒短信</li>
                        <li>观影期间请将手机调至静音模式，文明观影</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 页面加载完成后显示成功动画
        $(document).ready(function() {
            $('.success-icon').addClass('animate__animated animate__bounceIn');
        });
    </script>
</body>
</html>
